<template>
        <div id="commodity">
            <!-- action表示图片要上传到的后台api接口 地址一定要是后台的根地址加上请求地址-->
            <!-- on-preview事件的作用是点击预览图片-->
            <!-- on-remove事件的作用是删除图片 -->
            <!-- list-type指定当前预览组件的呈现方式 -->
            <el-button @click="query()" color = "red" style="margin-left: 40%">点击刷新呈现兔兔日常</el-button>
            <el-table :data="tableData"  style="width: 100%;margin-left: 20%;margin-top:10% " isCollapse="false" v-show="RAshow">

            <el-table-column prop="img" label="养兔日常记录" width="400px">
                <template v-slot:default="scope">
                  <el-button size="mini" @click="handleEdit(scope.row.id,scope.row.img)">编辑</el-button>
                    <el-image :src="scope.row.img"/>
                </template>
            </el-table-column>
            <el-table-column prop="action" label="描述" width="300px" />
             </el-table>

            <div v-show="AddRAshow" >
                <el-card class="box-card" style="margin-left: 230px;width: 50%">
                    <div slot="header"  class="clearfix">
                        <h2>添加养兔日常</h2>
                    </div>
                    <el-form :model="addForm"  style="width:90%"  ref="addForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="描述" prop="name">
                            <el-input v-model="addForm.action"></el-input>
                        </el-form-item>
<!--                        <el-upload v-show="UpShow" class="upload-demo" action="http://127.0.0.1:8082/oss/upload"-->
                        <el-upload v-show="UpShow" class="upload-demo" action="http://8.134.101.233:8082/oss/upload"
                                   :on-success="handleAvatarSuccess"
                                   :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" >
                            <el-button  type="primary">点击上传</el-button>
                        </el-upload>
                      <div style="margin-top: 15px">
                            <el-button size="small" type="primary" @click="submitAddForm('addForm')" style="text-align:left">确认添加</el-button>
                      </div>
                    </el-form>
                </el-card>
            </div>

        </div>

</template>

<script>
    export default {
        name: "DailyRabbitBreeding",
        data() {

            return {
                AddRAshow:false,
                addForm:[{
                    id:'',
                    img:'',
                    action:'6'
                }
                ],
                cid:'',
                Img:'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/%E9%BB%98%E8%AE%A4.png',
                UpShow:true,
                RAshow:false,
                tableData: [
                    {
                        id:1,
                    action: '睡觉',
                    img: '\n' +
                        'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/%E9%BB%98%E8%AE%A4.png',
                    }, {
                        id:2,
                        action: '户外眺望',
                        img: '\n' +
                            'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/%E9%BB%98%E8%AE%A4.png',
                    },
                    {   id:3,
                        action: '洗脸',
                        img: '\n' +
                            'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/%E9%BB%98%E8%AE%A4.png',
                    },
                    {
                        id:4,
                        action: '跳跃',
                        img: '\n' +
                            'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/%E9%BB%98%E8%AE%A4.png',
                    },
                    {
                        id:5,
                        action: '啃兔窝',
                        img: '\n' +
                            'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/%E9%BB%98%E8%AE%A4.png',
                    },
                    {
                        id:6,
                        action: '',
                        img: '\n' +
                            'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/%E9%BB%98%E8%AE%A4.png',
                    },
                    {
                        id:7,
                        action: '',
                        img: '\n' +
                            'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/%E9%BB%98%E8%AE%A4.png',
                    },
                ]
            }
        },
        methods: {
            handleEdit(id,img){
                this.RAshow = false
                this.AddRAshow=true
                this.addForm.id = id
                this.addForm.img = img
                console.log("编辑"+this.addForm.action)
            },
            submitAddForm(){
                console.log(this.addForm.id+":"+this.addForm.action+":"+this.addForm.img)
                let actions = this.addForm.action
                console.log(actions)
                var user = JSON.parse(localStorage.getItem("user"));
                this.$http.get('/rabbitationDO/saveTest', {
                    params: {
                        id:this.addForm.id,
                        action:actions,
                        img:this.addForm.img,
                        cid: user
                    }
                }).then(res => {
                    this.query()


                })
                this.AddRAshow=false
                this.RAshow = true
            },
            query() {
                var user = JSON.parse(localStorage.getItem("user"));
                // console.log(user)
                this.$http.get('/rabbitationDO/query', {
                    params: {
                        cid: user
                    }
                }).then(res => {
                    if (res.data.code === 200) {
                        // this.id = res.data.data[0].id
                        console.log( res.data.data.length)
                        for(let i = 0;i<res.data.data.length;i++){
                            this.tableData[i].id = res.data.data[i].id
                            this.tableData[i].img = res.data.data[i].img
                            this.tableData[i].action = res.data.data[i].action
                        }
                        this.RAshow = true
                        // this.tableData.action = res.data.data.list.action
                        this.$message.success('成功')

                        // console.log("haha"+res.data.data.list.action)
                    } else {
                        this.$message.error('失败')
                    }
                })
            },
            //上传成功后处理
            handleAvatarSuccess(res) {
                var user = JSON.parse(localStorage.getItem("user"));
                // console.log("hahaid"+this.addForm.id)
                this.addForm.img = res
                // this.Img = res;
                this.$http.get('/rabbitationDO/save', {
                    params: {
                        id:this.addForm.id,
                        img:res,
                        cid: user
                    }
                }).then(res => {
                    console.log("suss")
                })

            },

            // 处理图片预览效果
            handlePreview() {
            },
            // 处理移除图片的操作
            handleRemove(action) {
            //     var user = JSON.parse(localStorage.getItem("user"));
            //     this.$http.get('/rabbitationDO/saveTest', {
            //         params: {
            //             id:this.addForm.id,
            //             action:'兔子眺望',
            //             img:'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/%E9%BB%98%E8%AE%A4.png',
            //             cid: user
            //         }
            //     }).then(res => {
            //         this.query()
            //     })
            }
        },
        created() {
            this.query()
        }
    }

</script>


<style scoped>
    @import url("DRB.css");
</style>